<template>
  <div class="gedanlist">
    <!-- 选择更换歌单类型 -->
    <van-dropdown-menu>
      <van-dropdown-item v-model="gedanTagValue" :options="gedanTagOption" v-on:change="valueChange" />
    </van-dropdown-menu>
    <!-- 歌单列表 -->
    <van-list :offset="500" v-if="changeListShow" :immediate-check="false" v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <van-cell v-for="item in gedanList" :key="item.coverImgId" v-on:click="$router.push(`/gedandetail?id=${item.id}`)">
        <template>
          <div class="img">
            <van-image width="100%" height="100%" :src="item.coverImgUrl"></van-image>
          </div>
          <div class="panels">
            <p>{{item.name}}</p>
          </div>
          <van-icon name="arrow" />
        </template>
      </van-cell>
    </van-list>
    <!-- 加载loading -->
    <van-loading v-else color="red" vertical size="35px" text-size="18px">加载中...</van-loading>
  </div>
</template>

<script>
import { getGedanfenlei, getGedanneirong } from '../../../utils/api'
export default {
  name: 'GedanList',
  data () {
    return {
      // 当前选择歌单类型
      gedanTagValue: '全部',
      // 全部歌单类型
      gedanTagOption: [],
      // 歌单列表
      gedanList: [],
      // 每次限制的数量
      limit: 20,
      loading: false,
      finished: false,
      // 歌单总数
      total: 0,
      // 每次开始的offset
      offset: 0,
      // 使用v-if 重新触发全部生命周期 防止切换歌单类型后发起两次请求 导致错误
      changeListShow: true,
    };
  },
  methods: {
    // 获取歌单分类
    async getGedanfenleiFn () {
      let result = await getGedanfenlei();
      if (result.code === 200) {
        let arr = [{
          text: '全部',
          value: '全部'
        }];
        result.tags.forEach((item) => {
          arr.push({
            text: item.name,
            value: item.name
          })
        })
        this.gedanTagOption = arr;
      }
    },
    // 获取歌单分类对应的歌单内容
    async getGedanneirongFn () {
      let result = await getGedanneirong(this.gedanTagValue, this.limit, this.offset);
      if (result.code === 200) {
        this.gedanList = result.playlists;
        this.total = result.total;
        this.finished = false;
      }
    },
    // 加载数据
    async onLoad () {
      // 异步更新数据
      let result = await getGedanneirong(this.gedanTagValue, this.limit, this.offset + this.limit);
      if (result.code === 200) {
        this.offset = this.offset + this.limit;
        this.gedanList.push(...result.playlists);
        // 加载状态结束
        this.loading = false;
      }
      // 数据全部加载完成
      if (this.gedanList.length >= this.total) {
        this.finished = true;
      }
    },
    // 切换歌单类型
    async valueChange (tag) {
      // 返回顶部
      window.scroll(0, 0);
      // 使用v-if 重新触发全部生命周期 防止切换歌单类型后发起两次请求 导致错误
      this.changeListShow = false;
      this.gedanList = [];
      let result = await getGedanneirong(tag, this.limit, 0);
      if (result.code === 200) {
        this.gedanList = result.playlists;
        this.total = result.total;
        this.offset = 0;
        this.finished = false;
        // 使用v-if 重新触发全部生命周期 防止切换歌单类型后发起两次请求 导致错误
        this.changeListShow = true;
      }
    }
  },
  mounted () {
    this.getGedanfenleiFn();
    this.getGedanneirongFn();
  }
}
</script>

<style lang="less" scoped>
	.gedanlist{
		margin-top: 100/50rem;
	}
	.van-dropdown-menu{
		/deep/ .van-dropdown-menu__bar{
			position: fixed;
			width: 100%;
			z-index: 1;
			box-shadow: none;
			height: 100/50rem;
		/deep/ .van-dropdown-menu__title{
				font-size: 0.65rem;
				line-height: 1.3;
			} 
		}
		/deep/ .van-cell__title{
			font-size: 0.62rem;
		}
    /deep/ .van-ellipsis{
      font-size: 0.6rem;
    } 
	}
	.van-cell{
		padding: 0;
		.van-cell__value{
			height: 5rem;
			display: flex;
			padding-left: 20/50rem;
			.img{
				margin: auto 0;
				width: 200/50rem;
				height: 200/50rem;
				background-color: pink;
				margin-right: 0.6rem;
			}
			.panels{
				margin-top: 30/50rem;
				p{
					font-size: 35/50rem;
					width: 380/50rem;
					margin: 0;
					line-height: 1.3;
				}
			}
			.van-icon:before{
				position: absolute;
				right: -1.7rem;
				top: 50%;
				color: #888;
				font-size: 40/50rem;
				transform: translateY(-50%);
			}	
		}
	}
  .van-loading{
    padding-top: 3rem;
  }
	.van-list{
		margin-bottom: 70/50rem;
		padding-top: 2rem;
    /deep/ .van-list__finished-text{
      height: 100/50rem;
      line-height: 70/50rem;
    }
	}
</style>